<template>
    <div>
        <img src="../../assets/imges/banner.jpg" alt="" class="img1">
        <ul class="ul1">
            <li>
                <img src="../../assets/imges/销量2_c2.jpg" alt="">
                <span>销量排行</span>
            </li>
            <li>
                <img src="../../assets/imges/上市2.jpg" alt="">
                <span>上市新车</span>
            </li>
            <li>
                <img src="../../assets/imges/选车2.jpg" alt="">
                <span>条件选车</span>
            </li>
            <li>
                <img src="../../assets/imges/购车季.jpg" alt="">
                <span>购车季</span>
            </li>
            <li>
                <img src="../../assets/imges/成交2.jpg" alt="">
                <span>查成交价</span>
            </li>
        </ul>
        <div class="center">
            <ul class="ul6">
                <li>
                    <span>10万以下</span>
                    <span>轿车</span>
                </li>
                <li>
                    <span>10-15万</span>
                    <span>SUV</span>
                </li>
                <li>
                    <span>15-20万</span>
                    <span>新能源</span>
                </li>
                <li>
                    <span>20-30万</span>
                    <span>更多</span>
                </li>
            </ul>
            <ul class="ul3 ul6">
                <li>
                    <img src="../../assets/imges/本田3.jpg" alt="">
                    <span>本田</span>
                </li>
                <li>
                    <img src="../../assets/imges/丰田3.jpg" alt="">
                    <span>丰田</span>
                </li>
                <li>
                    <img src="../../assets/imges/日产3.jpg" alt="">
                    <span>日产</span>
                </li>
                <li>
                    <img src="../../assets/imges/宝马3.jpg" alt="">
                    <span>宝马</span>
                </li>
                <li>
                    <img src="../../assets/imges/大众3.jpg" alt="">
                    <span>大众</span>
                </li>
            </ul>
            <ul class="ul4 ul6">
                <li>
                    <img src="../../assets/imges/奥迪4.jpg" alt="">
                    <span>奥迪A4L</span>
                </li>
                <li>
                    <img src="../../assets/imges/奥迪5.jpg" alt="">
                    <span>朗逸</span>
                </li>
                <li>
                    <img src="../../assets/imges/奥迪6.jpg" alt="">
                    <span>哈弗H6</span>
                </li>
            </ul>
        </div>

        <van-index-bar>
            <van-index-anchor index="A" />
            <ul class="ul2">
                <li>
                    <div class="left">
                        <img src="../../assets/imges/奥迪.jpg" alt="">
                        <span>奥迪</span>
                    </div>
                    <span>43款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../assets/imges/埃安.jpg" alt="">
                        <span>埃安</span>
                    </div>
                    <span>14款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../assets/imges/AITO.jpg" alt="">
                        <span>AITO</span>
                    </div>
                    <span>3款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../assets/imges/大众2.jpg" alt="">
                        <span>大众</span>
                    </div>
                    <span>6款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../assets/imges/哈弗.jpg" alt="">
                        <span>哈弗</span>
                    </div>
                    <span>13款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../assets/imges/比亚迪2.jpg" alt="">
                        <span>比亚迪</span>
                    </div>
                    <span>21款</span>
                </li>
            </ul>


            <van-index-anchor index="B" />
            <ul class="ul2">
                <li>
                    <div class="left">
                        <img src="../../assets/imges/奥迪.jpg" alt="">
                        <span>奥迪</span>
                    </div>
                    <span>43款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../assets/imges/埃安.jpg" alt="">
                        <span>埃安</span>
                    </div>
                    <span>14款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../assets/imges/AITO.jpg" alt="">
                        <span>AITO</span>
                    </div>
                    <span>3款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../assets/imges/大众2.jpg" alt="">
                        <span>大众</span>
                    </div>
                    <span>6款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../assets/imges/哈弗.jpg" alt="">
                        <span>哈弗</span>
                    </div>
                    <span>13款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../assets/imges/比亚迪2.jpg" alt="">
                        <span>比亚迪</span>
                    </div>
                    <span>21款</span>
                </li>
            </ul>


            <van-index-anchor index="C" />
            <ul class="ul2">
                <li>
                    <div class="left">
                        <img src="../../assets/imges/奥迪.jpg" alt="">
                        <span>奥迪</span>
                    </div>
                    <span>43款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../assets/imges/埃安.jpg" alt="">
                        <span>埃安</span>
                    </div>
                    <span>14款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../assets/imges/AITO.jpg" alt="">
                        <span>AITO</span>
                    </div>
                    <span>3款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../assets/imges/大众2.jpg" alt="">
                        <span>大众</span>
                    </div>
                    <span>6款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../assets/imges/哈弗.jpg" alt="">
                        <span>哈弗</span>
                    </div>
                    <span>13款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../assets/imges/比亚迪2.jpg" alt="">
                        <span>比亚迪</span>
                    </div>
                    <span>21款</span>
                </li>
            </ul>


            <van-index-anchor index="D" />
            <ul class="ul2">
                <li>
                    <div class="left">
                        <img src="../../assets/imges/奥迪.jpg" alt="">
                        <span>奥迪</span>
                    </div>
                    <span>43款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../assets/imges/埃安.jpg" alt="">
                        <span>埃安</span>
                    </div>
                    <span>14款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../assets/imges/AITO.jpg" alt="">
                        <span>AITO</span>
                    </div>
                    <span>3款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../assets/imges/大众2.jpg" alt="">
                        <span>大众</span>
                    </div>
                    <span>6款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../assets/imges/哈弗.jpg" alt="">
                        <span>哈弗</span>
                    </div>
                    <span>13款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../assets/imges/比亚迪2.jpg" alt="">
                        <span>比亚迪</span>
                    </div>
                    <span>21款</span>
                </li>
            </ul>


            <van-index-anchor index="E" />
            <ul class="ul2">
                <li>
                    <div class="left">
                        <img src="../../assets/imges/奥迪.jpg" alt="">
                        <span>奥迪</span>
                    </div>
                    <span>43款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../assets/imges/埃安.jpg" alt="">
                        <span>埃安</span>
                    </div>
                    <span>14款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../assets/imges/AITO.jpg" alt="">
                        <span>AITO</span>
                    </div>
                    <span>3款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../assets/imges/大众2.jpg" alt="">
                        <span>大众</span>
                    </div>
                    <span>6款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../assets/imges/哈弗.jpg" alt="">
                        <span>哈弗</span>
                    </div>
                    <span>13款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../assets/imges/比亚迪2.jpg" alt="">
                        <span>比亚迪</span>
                    </div>
                    <span>21款</span>
                </li>
            </ul>


            <van-index-anchor index="F" />
            <ul class="ul2">
                <li>
                    <div class="left">
                        <img src="../../assets/imges/奥迪.jpg" alt="">
                        <span>奥迪</span>
                    </div>
                    <span>43款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../assets/imges/埃安.jpg" alt="">
                        <span>埃安</span>
                    </div>
                    <span>14款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../assets/imges/AITO.jpg" alt="">
                        <span>AITO</span>
                    </div>
                    <span>3款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../assets/imges/大众2.jpg" alt="">
                        <span>大众</span>
                    </div>
                    <span>6款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../assets/imges/哈弗.jpg" alt="">
                        <span>哈弗</span>
                    </div>
                    <span>13款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../assets/imges/比亚迪2.jpg" alt="">
                        <span>比亚迪</span>
                    </div>
                    <span>21款</span>
                </li>
            </ul>
        </van-index-bar>
    </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
div {
    font-size: 30px;

    .img1 {
        width: 94%;
        margin-left: 2%;
    }

    .ul1 {
        display: flex;
        padding: 15px 0px;

        li {
            text-align: center;
            margin-right: 5px;

            img {
                width: 135px;
            }
        }
    }

    .center {

        // background-color: white;
        .ul6 {
            width: 94%;
            margin-left: 3%;
            background-color: white;
            border-radius: 15px;
            display: flex;
            justify-content: space-around;

            li {
                display: flex;
                flex-direction: column;
                text-align: center;

                img {
                    width: 135px;
                }

                span {
                    display: block;
                    padding: 10px;
                    margin-bottom: 10px;
                    background-color: #F6F7FB;
                    border-radius: 10px;
                }
            }
        }

        .ul3 {
            li {
                span {
                    background-color: white;
                }
            }
        }

        .ul4 {
            li {
                img {
                    width: 200px;
                }

                span {
                    background-color: white;
                }
            }
        }
    }

    .ul2 {
        width: 94%;
        margin-left: 3%;
        background-color: white;
        border-radius: 15px;

        li {
            display: flex;
            justify-content: space-between;
            align-items: center;
            line-height: 100px;

            .left {
                display: flex;
                align-items: center;

                img {
                    width: 90px;
                }
            }
        }
    }
}
</style>